<template>
    <view class="container">
        <BackButton v-if="!showRecruitModal" />
        <!-- 地图背景 -->
        <map class="map-bg" :latitude="latitude" :longitude="longitude" :scale="16" :show-location="true"
            @ready="onMapReady"></map>
        <!-- 地图遮罩 -->
        <view class="map-overlay"></view>

        <!-- 雷达动画 -->
        <view class="radar-container">
            <view class="radar-circle radar-circle-1"></view>
            <view class="radar-circle radar-circle-2"></view>
            <view class="radar-circle radar-circle-3"></view>
            <view class="radar-dot"></view>
        </view>

        <!-- 计时器 -->
        <view class="timer-container">
            <text class="timer-text">正在招募小伙伴..</text>
            <text class="timer-countdown">{{ countdown }}</text>
        </view>

        <!-- 底部信息 -->
        <view class="bottom-info">
            <view class="cancel-recruit" @click="showCancelPopup">取消招募</view>
            <view class="prompt-text">长时间没人接单，可追加酬金</view>
            <view class="reward-info">
                <text class="reward-label">当前报酬：¥{{ rewardAmount.toFixed(2) }}</text>
            </view>
            <input class="reward-input" placeholder="请输入您愿意为每人追加的酬金" v-model.number="additionalReward" />
            <view class="button-group">
                <button class="modify-btn" @click="handleModify">修改订单</button>
                <button class="confirm-btn" @click="handleConfirm">确认追加</button>
            </view>
        </view>
        <button class="cancel-btn" @click="showCancelPopup">取消招募</button>


        <!-- 取消招募弹窗 -->
        <uni-popup ref="cancelRecruitPopup" type="center" @close="closeCancelPopup">
            <view class="delete-popup">
                <view class="delete-message">确定要取消招募吗？</view>
                <view class="delete-buttons">
                    <view class="canceldel-btn" @click="closeCancelPopup">取消</view>
                    <view class="confirmdel-btn" @tap="confirmCancelRecruitment">确认</view>
                </view>
            </view>
        </uni-popup>

        <!-- 追加酬金支付弹窗 - 使用公共组件 -->
        <PaymentModal :show="showAddRewardModal" title="追加酬金" :total-amount="totalAdditionalAmount"
            :details-text1="`招募人数: ${orderInfo.people_num}人`"
            :details-text2="`每人追加: ${Number(additionalReward).toFixed(2)}元`" confirm-text="确认支付"
            :showPaymentMethods="true" @close="closeAddRewardModal" @confirm="handleAddRewardPayment" />

        <!-- 引入修改订单弹窗组件 - 移动到这里 -->
        <OrderModifyModal :showModal.sync="showModifyModal" :orderId="orderId" @modifySuccess="onModifySuccess" />
        <!-- 新增招募工人弹窗组件 -->
        <RecruitModal :show.sync="showRecruitModal" :order="orderInfo" @close="showRecruitModal = false"
            @taskCancelled="showRecruitModal = false" @recruitmentCompleted="showRecruitModal = false" />
            
        <!-- 无人接单提示弹窗 -->
        <uni-popup ref="noWorkerPopup" type="center" @close="closeNoWorkerPopup">
            <view class="delete-popup">
                <view class="delete-message">当前无人接单，可追加佣金提高招募成功率</view>
                <view class="delete-buttons">
                    <view class="canceldel-btn" @click="handleBack">返回</view>
                    <view class="confirmdel-btn" @click="handleGoAddReward">去追加</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script src="./payment-success.js"></script>
<style lang="scss" src="./payment-success.scss"></style>